/**
 * 一、React的props的默认值设置有两种方式
 * 1、静态属性方式
 * 在类组件内部编写静态属性
 * static defaultProps={
 *   props的属性名：默认值
 * }
 * 2、类名方式
 * 在类的同级，编写如下
 * 类名.defaultProps={
 *   props的属性名:默认值
 * }
 * 二、React的props的验证器的实现
 * 1、下载prop-types
 * 2、导入import PropTypes from 'prop-types'
 * 3、子类中中有两种配置方式
 * static propTypes={
 *   props属性名:验证器
 * }
 * 1）在类组件内部编写静态属性
 * 2）在类的同级编写类名
 * 三、子组件向父组件传值
 * 1、vue中使用的是自定义的事件的方法
 * 2、props的回调方式来进行传值
 * 具体的实现步骤如下
 * 1）在子组件中触发相应的事件处理函数，在该事件处理函数中通过在this.props中调用回调函数的方式来完成
 * onClick={this.props.回调函数(要传递数据)}
 * 2) 父组件中
 * <父组件 回调函数的名称={this.父组件中的成员属性}></父组件>
 * 3）父组件成员属性=(接收子组件传递的形参)=>{}
 * 注意：父组件传递过来的数据(基本数据类型)，它是不能够直接修改的，这是由于我们单项数据流所导致的，单项数据流不允许
 * 用户直接在子组件中修改父组件通过props接收到的值！！！！！
 * 如果：子组件要修改父组件传递过来的数据，不要直接改(如果是基本数据类型，直接报错，props中传递过来的数据是只读)
 * 
 */
import React, { Component } from 'react'
import './PersonInfo.scss'
import PropTypes from 'prop-types'

export default class PersonInfo extends Component {
  // static defaultProps={
  //   name:"无名",
  //   age:18,
  //   sex:"男",
  //   hobby:['兴趣1','兴趣2'],
  //   avatar:'https://hbimg.huaban.com/ec51f554894a9fa792bd337845aa5f829ccbacc18cff-0Tsdp2_fw658'
  // }

  static propTypes={
    age:PropTypes.number.isRequired,
    sex:PropTypes.oneOf(['男','女']),
    hobby:PropTypes.array
  }
  render() {
    return (
      <div className='box'>
        <div>
            <img src={this.props.avatar} alt="" />
        </div>
        <div>姓名:{this.props.name}</div>
        <div>年龄:{this.props.age}</div>
        <div>性别:{this.props.sex}</div>
        <div>
           点赞数:{this.props.loveNum}
        </div>
        <div>爱好:{this.props.hobby instanceof Array&&this.props.hobby.join("、")}</div>
        <div>
          <button onClick={()=>{
             //子组件传递数据到父组件
             this.props.changeLoveNum(this.props.id,this.props.loveNum+1)
           }}>点赞</button>
        </div>
      </div>
    )
  }
}
PersonInfo.defaultProps={
  name:"无名",
  age:18,
  sex:"男",
  hobby:['兴趣1','兴趣2'],
  loveNum:0,
  avatar:'https://hbimg.huaban.com/ec51f554894a9fa792bd337845aa5f829ccbacc18cff-0Tsdp2_fw658'
}
